<script>
    import List from '../components/list.svelte';
    import Btn from '../components/btn.svelte';
    import Paging from '../components/paging.svelte';
    import { onMount } from 'svelte';
    import { Post } from '../lib/net.js';
    import { WithdrawState } from '../conf.js';
    import {SearchAgent, WithdrawRefuse,WithdrawConfirm,WithdrawList,AgentList } from '../api.js';
    import Query from '../model/query.js';
    import moment from 'moment';
    import QueryBar from '../components/queryBar.svelte';
    import { OtcState,MoneyType} from '../conf.js';


    let btnText = `<i>+</i>添加代理`
    let btnHref = "/agent/add"

    let data = {title:["UID", "姓名", "手机号","邮箱", "代理人","身份证", "订单编号", "提币方式", "提币数量", "提币地址", "手续费", "申请时间", "状态"],data:[]}

    let total = 0;

    var query = new Query();
	var wahaha = '';
    onMount(()=>{
        accessList();
    });

    async function getList(e){
        if (e) {
            query.start = e.detail.start
            query.end = e.detail.end
            if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
            }else {
                query.admin = null
            }
        }
       query.size = 7;
       let ret = await Post(WithdrawList,query)
        console.log(ret)
       query.total = ret.total;
       query.page = ret.page;
       query.size = ret.size;
	   wahaha = ret.Extra.withdraw_total;
       let _data = [];
       if (query.state >= 1) {
           data.title = ["UID", "姓名", "手机号","邮箱", "代理人","身份证", "订单编号", "提币方式", "提币数量", "提币地址", "手续费", "申请时间", "状态"];
       }
       for(let item of ret.list) {
        let arr = [
            item.uid, item.name, item.phone,item.email, item.agent,item.card_id, item.tid, MoneyType[item.coin_type],
            item.amount, item.withdraw_addr, item.fee, item.show_operate_date,'已汇出'
            ]
            // if(!query.state) {
            //     arr.push( `<button class="button is-success is-small" data-id=${item.tid} type="access" on:click> 通过 </button>`)
            //     arr.push( `<button class="button is-danger is-small" data-id=${item.tid} type="failed" on:click>取消</button>`)
            // }
        arr.id = item.tid;
        arr.handler = access;
       _data.push(arr);
       }
       data.data = _data;
    }

    async function access(){

        let btn = this.querySelector("button");

        let tid = btn.getAttribute("data-id");
        let btnType = btn.getAttribute("type");

        if (btnType == "access") {
            await Post(WithdrawConfirm,{tid});
        } else {
            await Post(WithdrawRefuse,{tid})
        }

        getList(e);
    }

    function setPage(page){
        query.page = page;
        getList();
    }

    function prepareList(e){
        query.state = 0;
        getList(e);
    }
    function accessList(e){
        query.state = 1;
        getList(e);
    }
    function doneList(e){
        query.state = 2;
        getList(e);
    }
</script>

<div class="view">
	<div class="borderRadius4 container" style="margin:0">
			<div class="columns rowReverse" style="padding: 20px;">
					<div class="column is-4">
							<div class="rowNumCenter">
									<span class="left1">用户数量：</span>
									<span class="mid1" style="color:forestgreen">{query.total}</span>
									<span class="left1">人</span>
							</div>
							<div class="rowNumCenter">
									<span class="left1">资金总计：</span>
									<span class="mid1" style="color:forestgreen">{wahaha}</span>
									<span class="left1">USDT</span>
							</div>
					</div>
			</div>
	</div>
    <div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
         class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            充提币管理-已审核
        </span>
    </div>
    <div class="borderRadius4 container rowCenter " style="margin-top: 0px">
        <QueryBar query={query} on:message={getList}/>
    </div>
    <div class="container" style="margin-top: -10px">
        <List data={data}/>
    </div>
    <div class="container rowReverse">
        {#if query.total !== 0}
        <Paging page={query} handler={setPage}/>
        {/if}
    </div>
</div>

<style>
		.rowNumCenter{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			font-size: 12px;
		}
		.containerHold {
			margin: 20px 1%;
			width: 50px;
			position: absolute;
			top: 20%;
		}
    .borderRadius4{
        border-radius: 4px;
    }
    .container {
        margin:20px 5px;
    }
    .info {
        background: #fff;
    }
    .btn {
        line-height: 5px;
        top: 50%;
        transform: translateY(10%);
    }
    .view {
        overflow-y: scroll;
    }
</style>
